<template>
	<view>
		<!-- 根据isOpen方法判断是否允许在web-view中打开链接 -->
		<web-view v-if="isOpen(url)" :src="url"></web-view>
		<!-- 如果不允许在web-view中打开，则显示提示信息 -->
		<view v-else class="tip column">
			<text>如需浏览，请长按网址复制后使用浏览器访问：</text>
			<text selectable>{{url}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: null  // 存储要访问的URL地址
			}
		},

		onLoad(option) {
			// console.log('option', option)
			// 从页面参数中获取URL并赋值给data中的url变量
			this.url = option.url
		},

		methods: {
			// 判断是否允许在web-view中打开URL
			isOpen() {
				// 检查url是否存在
				if(this.url) {
					// 只能特定的网站
					// 判断URL是否包含'baidu.com'，如果是则允许在web-view中打开
					return this.url.indexOf('baidu.com') !== -1
				}
			}
		}

	}
</script>

<style lang="scss">
	// 提示信息样式
	.tip {
		position: relative;
		top: 200rpx;        // 相对定位，距离顶部200rpx
		width: 500rpx;      // 宽度500rpx
		margin: 0 auto;     // 水平居中
		/* 自动换行 */
		word-wrap: break-word;  // 文本自动换行
		font-size: 30rpx;   // 字体大小
		text-align: center; // 文本居中
		text:first-child{
			font-size: 40rpx;   // 第一个文本元素字体大小
			font-weight: bold;  // 字体加粗
			margin-bottom: 30rpx; // 下外边距
		}
	}
</style>
